import { defineComponent } from 'vue';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import Sfz from "@/assets/images/sfz.png";
import Sbk from "@/assets/images/sbk.png";
import Yyjzk from "@/assets/images/yyjzk.png";
import Ybdzpz from "@/assets/images/ybdzpz.png";
import Jmjkk from "@/assets/images/jmjkk.png";
import Sldl from "@/assets/images/sldl.png";
import { Steps } from '~/src/components/Steps';
import { KEEP_VIDEO_TOP } from '~/src/config';
import router from "@/router";

export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 定义登录方式列表数据
        const loginTypes = [
            { id: 1, name: '身份证', src: Sfz },
            { id: 2, name: '社保卡', src: Sbk },
            { id: 3, name: '医院就诊卡', src: Yyjzk },
            { id: 4, name: '医保电子凭证', src: Ybdzpz },
            { id: 5, name: '居民健康卡', src: Jmjkk },
        ];

        // 处理点击事件，跳转到第二个页面并传递name参数
        const handleClick = (name: string) => {
            router.push({
                path: '/InputCard',
                query: { CardName: name }
            });
        };

        return () => (<>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.container_mar}>
                <div class={Style.container}>
                    <div class={Style.title}>选择登录方式</div>

                    <div class={Style.types}>
                        {loginTypes.map(item => (
                            <img
                                key={item.id}
                                src={item.src}
                                onClick={() => handleClick(item.name)}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </>);
    }
})
